<template>
    <div class="nav">
        <ul ref="ul">
            <li @click="home" ref="PHome">主页</li>
            <li @click="detail" v-if="isAdmit" ref="PDetail">文章</li>
            <li @click="start" ref="PStart">收藏</li>
            <li @click="write" v-if="isAdmit" ref="PWrite">写文章</li>
            <li @click="sgs" v-if="isAdmit == 2">十年三国</li>
            <li @click="sgs" v-if="isAdmit == 2">管理员申请</li>
            <li @click="sgs" v-if="!isAdmit">申请成为管理员</li>
        </ul>
    </div>
</template>

<script>
import { nanoid } from 'nanoid';
export default {
    name:'SmallNav',
    props:['isAdmit'],
    methods: {
        home(event) {
            this.removeClass();
            this.addClass(event);
            this.$router.replace({
                path:'/PersonalCenter/PHome/BasicMessage',
                query:{fix:nanoid(5)}
            })
        },
        detail(event) {
            this.removeClass();
            this.addClass(event);
            this.$router.replace({
                name:'PDetail',
                query:{fix:nanoid(5)}
            })
        },
        start(event) {
            this.removeClass();
            this.addClass(event);
            this.$router.replace({
                name:'PStart',
                query:{fix:nanoid(5)}
            })
        },
        write(event) {
            this.removeClass();
            this.addClass(event);
            this.$router.replace({
                name:'PWrite',
                query:{fix:nanoid(5)}
            })
        },
        sgs(event) {
            this.removeClass();
            this.addClass(event);
            this.$router.replace({
                name:'PSgs',
                query:{fix:nanoid(5)}
            })
        },
        addClass(event) {
            event.target.classList.add('active');
        },
        removeClass(){
           let [...arr] = this.$refs.ul.children;
           arr.forEach(element => {
                element.classList.remove('active');
           });
        }
    },
    beforeMount(){
        if(this.$route.path == '/PersonalCenter'){
            this.$router.replace({
                name:'PHome'
            })
        }
    },
    mounted(){
        let time = setTimeout(()=>{
            let NAME = this.$route.name
            if(this.$refs[`${NAME}`]){
                this.removeClass();
                this.$refs[`${NAME}`].classList.add('active');
            }else{
                this.$refs.PHome.classList.add('active');
            }
            clearTimeout(time)
        },100)
    },
}
</script>

<style lang="less">
    .nav{
        height: 60px;
        width: 100%;
        border: 1px solid rgba(128,128,128,.3);
        margin-bottom: 10px;
        border-radius: 5px;
        box-sizing: border-box;
        box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
        ul{
            display: flex;
            flex-direction:row ;
            li{
                cursor: pointer;
                font-family: 'FZZYJT';
                height: 60px;
                font-size: 22px;
                user-select: none;
                line-height: 60px;
                margin-left:10px ;
                margin-right:10px ;
                &:hover{
                    color: #6cf;
                }
            }
            .active{
                color: #6cf;
            }
        }
    }
</style>